{{include './index_header.html' '上传/修改头像'}}
<div class="mui-content">
    <form action="">
        <div class="mui-row">
            <div class="mui-col-xs-12">
                <div class="userPic">
                    <img src="./img/addimg.png" alt="">
                </div>
                
            </div>
                <input type="file" style="display: none;" id="upload">
                <input type="submit" class="mui-col-xs-12">
        </div>
    </form>
    

</div>
<script>
    $('.userPic img').click(function(){
        $('#upload').click()
    })
    $('#upload').change(function(){
        changeHandle()
    })
    $('form').submit(function(e){
        e.preventDefault()
        var upsrc = getBase64Image(document.querySelector('.userPic img'))
        // upsrc = encodeURIComponent(upsrc);
        $.post('/user/upload',{pic:upsrc},(data)=>{
            mui.alert(data.msg,'系统提示','确定',function(){
                if(data.code == 1){
                    location.href = '/mine'
                }
            })
        })
    })
    


    function getBase64Image(img) {  
        var canvas = document.createElement("canvas");  
        canvas.width = img.width;  
        canvas.height = img.height;  
        var ctx = canvas.getContext("2d");  
        ctx.drawImage(img, 0, 0, img.width, img.height);  
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
        var dataURL = canvas.toDataURL("image/"+ext);  
        return dataURL;  
    }  
    function changeHandle() {
            // FileReader() 该对象允许web应用程序异步操作读取
            // 存储用户计算机上的文件(或者是数据的缓存区)的内容。
            // 使用file对象或者bolb对象指定需要读取的文件和数据。
            var Files = new FileReader() // 创建一个读取文件的对象。

            // files 表示文件信息
            var InputsFile = document.getElementById('upload').files[0];

            // readAsDataURL 该方法会读取指定的Bolb对象或者File对象。
            Files.readAsDataURL(InputsFile)


            Files.onload = function() {
                // FileReader.result 该属性表示返回的文件内容
                // 只有在读取操作完成之后此属性才会生效。
                $('.userPic img').attr('src',this.result)
            }
                   
        }
</script>

</body>
</html>